<template>

  <el-container class="home-container">

    <el-header>

        <el-menu :default-active="defaultActive" class="el-menu-demo" mode="horizontal" @select="handleSelect"
          background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">


          <el-menu-item :index="menu.path+'' " v-for="menu in menuList" :key="menu.id" >

            <template slot="title">
              <!-- 定义左侧图标-->
              <i :class="menuIcon[menu.id]"></i>
              <!-- 定义菜单名称-->
              <span>{{menu.name}}</span>
            </template>

          </el-menu-item>

            <!-- <el-submenu index="2">
              <template slot="title">商品展示</template>
              <el-menu-item index="2-1">选项1</el-menu-item>
              <el-menu-item index="2-2">选项2</el-menu-item>
              <el-menu-item index="2-3">选项3</el-menu-item>
              <el-submenu index="2-4">
                <template slot="title">选项4</template>
                <el-menu-item index="2-4-1">选项1</el-menu-item>
                <el-menu-item index="2-4-2">选项2</el-menu-item>
                <el-menu-item index="2-4-3">选项3</el-menu-item>
              </el-submenu>
            </el-submenu>
            <el-menu-item index="3" @click="userbtn">用户中心</el-menu-item>
            <el-menu-item index="4" @click="billbtn">历史账单</el-menu-item> -->

        </el-menu>

      <el-button type="info" @click="logout">退出</el-button>
    </el-header>
    <el-container>
      <!-- 定义主页面结构-->
      <el-main>




        <!-- 定义路由展现页面-->
        <router-view></router-view>
      </el-main>

    </el-container>
  </el-container>

</template>

<script>
  export default {
    //初始化函数
    created() {
      // *******************************
      console.log(this.menuList)

      this.getMenuList()
      //设定模式选中按钮
      this.defaultActive = window.sessionStorage.getItem("activeMenu")
    },
    data() {
      return {
        activeIndex: '1',
        menuList: [],
        menuIcon: {
          '1': 'iconfont iconquanxian',
          '2': 'el-icon-s-home',
          '3': 'el-icon-user-solid',
          '4': 'el-icon-s-order'
        },
        //定义是否折叠
        isCollapse: false,
        //是否展现折叠动态效果
        isCollapseTransition: false,
        //定义默认高亮
        defaultActive: ''
      }
    },
    methods: {
      handleSelect(key, keyPath) {
        this.$router.push(keyPath+'')
      },
      logout() {
        //1.删除session中的记录
        window.sessionStorage.clear()
        //2.要求跳转到用户登录界面
        this.$router.push('/login')

      },
      async getMenuList() {
        //1.查询左侧菜单
        const {
          data: result
        } = await this.$http.get('/rights/getRightsUserList')

        //2.判断是否成功    后端响应 响应数据 SysResult对象
        if (result.status !== 200)
          return this.$message.error('获取权限列表失败!!!');

        this.menuList = result.data
      },
      //设定左侧折叠展开效果
      collspseClick() {
        this.isCollapse = !this.isCollapse
      },

      defaultActiveMenu(activeMenu) {
        //为了实现返回之后的选中效果,应该将数据保存到第三方中sessionStory
        window.sessionStorage.setItem("activeMenu", activeMenu)
        this.defaultActive = activeMenu
      }
    }
  }
</script>

<!-- 防止样式重叠 -->
<style lang="less" scoped>
  .el-header {
    background-color: #89b7c8;
    display: flex; //灵活的盒子容器
    justify-content: space-between; //左右对齐
    align-items: center; //文本元素居中对齐
    color: #FFFFFF; //设定字体颜色
    padding-left: 1px;

    >div {
      display: flex;
      align-items: center;

      span {
        margin-left: 15px;
        font-size: 25px; //设定字体高度
      }
    }
  }

  .el-aside {
    background-color: #2C3E50;

    .el-menu {
      border-right: none;
    }
  }

  .el-main {
    background-color: #EEEEEE;
  }

  .home-container {
    height: 100%;
    width: 100%;
  }

  .iconfont {
    margin-right: 8px;
  }

  //定义折叠项
  .leftCollapse {
    //设定背景色
    background-color: #708090;
    //定义字体大小
    font-size: 10px;
    //定义行高
    line-height: 30px;
    //定义颜色
    color: #FFFFFF;
    //设置居中
    text-align: center;
    //设定字符间距
    letter-spacing: 4px;
    //鼠标放上之后设置为小手
    cursor: pointer;
  }
</style>
